<!DOCTYPE html>

<html class="no-js">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title></title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
  <script src="../../cdn/vue/vue.global.min.js"></script>
  <link rel="stylesheet" href="../../cdn/element-plus/index.css" />
  <script src="../../cdn/element-plus/index.full.min.js"></script>

  <link rel="stylesheet" href="../../../lib/index.css" />
  <script src="../../../lib/avue.js"></script>
</head>

<body>
  <div id="app">
    <avue-crud :option="option" :data="data">

    </avue-crud>
  </div>
</body>
<script>
  var app = Vue.createApp({
    data() {
      return {
        dicData: [],
        data: [{
          input: 1,
          tree: 1,
          dic: "110000",
          dynamic: [{
            input: 1,
            select: 1,
            radio: 1,
          }, {
            input: 2,
            select: 2,
            radio: 1,
          }]
        }],
      }
    },
    computed: {
      option() {
        let callback = (value) => {
          if (value == 0) {
            this.dicData = [{
              label: 0,
              value: 0
            }]
          } else {
            this.dicData = [{
              label: 1,
              value: 1
            }]
          }
        }
        return {
          labelWidth: 110,
          column: [{
            label: '网络字典',
            prop: 'dic',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            dicUrl: 'https://cli.avuejs.com/api/area/getProvince',
          }, {
            label: '树型',
            prop: "tree",
            type: 'select',
            change: ({ value }) => {
              callback(value);
            },
            dicData: [{
              label: '1-1',
              value: 0,
            }, {
              label: "2-1",
              value: 1
            }]
          },
          {
            label: '子表单',
            prop: 'dynamic',
            type: 'dynamic',
            span: 16,
            span: 24,
            children: {
              height: 300,
              align: 'center',
              headerAlign: 'center',
              type: 'form',
              column: [{
                width: 200,
                label: '输入框',
                prop: "input",
                rules: [
                  {
                    required: true,
                    message: '必填项测试',
                    trigger: 'blur'
                  }
                ]
              }, {
                width: 200,
                label: '密码框',
                prop: "password",
                type: 'password',
              }, {
                width: 200,
                label: '字典',
                prop: "select",
                type: 'select',
                dicData: this.dicData
              }]
            },
          },
          ]
        }
      }
    }
  })
  app.use(ElementPlus)
  app.use(AVUE)
  app.mount('#app')
</script>

</html>